<template>
  <el-table
    v-loading="loading"
    :data="rows"
    border
    style="width: 100%"
    @selection-change="handleSelectionChange"
  >
    <el-table-column
      type="selection"
      align="center"
      :selectable="selectable"
    />
    <el-table-column
      label="序号"
      type="index"
      align="center"
      width="50"
    />
    <el-table-column v-for="(item,index) in columns" :key="index" :prop="item.prop" :label="item.label" align="center" />
    <el-table-column
      fixed="right"
      label="操作"
      width="200"
      align="center"
    >
      <template slot-scope="scope">






        <el-button
          icon="el-icon-delete"
          class="del"
          type="text"
          @click="del(scope.$index)"
        >
          删除
        </el-button>

        <el-button v-if="type=='user' && scope.row.username!=='admin'" type="text" size="small" @click="changeState(scope.$index)">
          更改状态
        </el-button>
        <el-button v-if="type=='role'" type="text"  @click="changeMenu(scope.$index)">
          菜单权限
        </el-button>



      </template>
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  name: 'Column',
  props: {
    columns: {
      type: Array,
      default() {
        return []
      }
    },
    rows: {
      type: Array,
      default() {
        return []
      }
    },
    type: {
      type: String,
      default() {
        return ''
      }
    },
    loading: {
      type: Boolean,
      default() {
        return true
      }
    }

  },
  data() {
    return {
      tableData: [],
      value1: ''
    }
  },

  mounted() {

  },
  methods: {
    handleSelectionChange(rows) {
      this.$emit('selectionChange', rows)
    },
    edit(index) {
      this.$emit('edit', index)
    },
    changeState(index) {
      this.$emit('changeState', index)
    },
    charge(index){
      this.$emit('charge',index)
    },
    selectable(row, rowIndex) {
      if (this.type === 'user' && row.username === 'admin') {
        return false
      }
      return true
    },
    del(index) {
      this.$emit('del', index)
    },
    changeMenu(index) {
      this.$emit('changeMenu', index)
    },
    showImg(index) {
      this.$emit('showImg', index)
    },
    test(index) {
      this.$emit('test', index)
    },
    selectMap(index) {
      this.$emit('selectMap', index)
    },
    show(index){
      this.$emit('showState', index)
    }
  }
}
</script>

<style scoped>
.del{
  color: red;
}
</style>
